<template>
  <view>
    <view
      v-if="isStartting"
      class="text starttingClas"
      :class="disableTextClass"
    >
      {{ showNum }}
    </view>
    <view
      v-else
      class="text"
      :class="textClass"
      @click="start"
    >
      {{ btnText }}
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    num: {
      type: [Number,String],
      default: 60,
    },
    btnText: {
      type: String,
      default: '开始',
    },
    textClass: {
      type: String,
      default: '',
    },
    disableTextClass: {
      type: String,
      default: '',
    },
    interceptStarttingBefore:{
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showText: '开始',
      isStartting: false,
      interHandler: null,
      showNum:60
    }
  },
  computed: {
    
  },
  watch: {
    num:{
      immediate:true,
      handler(v){
        this.showNum=v
      }
    }
  },
  created() {},
  beforeDestroy() {
    this.stop()
  },
  mounted() {},
  methods: {
    _start(e){
      if (e != undefined && this.isStartting) {
        return
      }
      //this.showNum = this.num
      this.isStartting = true
      this.$emit('startting')
      this._startting()
    },
    start(e) {
      if(this.interceptStarttingBefore){
        this.$emit('beforeStartting',(result)=>{
          if(typeof result=='boolean' &&result){
            this._start(e)
          }
        })
        return
      }
      this._start(e)
    },
    stop() {
      let _this = this
      _this.interHandler && clearInterval(_this.interHandler)
      _this.showNum = _this.num
      this.isStartting = false
    },
    _startting() {
      let _this = this
      _this.interHandler && clearInterval(_this.interHandler)
      _this.interHandler= setInterval(() => {
        if (_this.showNum <= 0) {
          _this.stop()
          _this.$emit('end')
        }
        --_this.showNum
      }, 1000)
    },
  },
}
</script>
<style lang="scss" scoped>
.text {
  font-size: 24rpx;
  color: #14d4e2;
}
.starttingClass {
  color: #afafaf;
}
</style>